<template>
  <view class="un-reward">
    <uni-nav-bar
      title="无限赏"
      color="#fff"
      leftIcon="left"
      backgroundColor="#F0DBB0;"
      :border="false"
      :statusBar="true"
      :fixed="true"
      titleClass="custom-title"
    >
      <template v-slot:left>
        <view @click="$common.back()">
          <image
            src="/static/images/back.png"
            style="width: 32rpx; height: 32rpx"
            mode="scaleToFill"
          />
        </view>
      </template>
    </uni-nav-bar>
    <view class="header">
      <swiper
        class="swiper"
        :indicator-dots="false"
        :autoplay="true"
        :circular="true"
        :current="currentIndex"
        @change="onSwiperChange"
        previous-margin="172rpx"
      >
        <swiper-item
          v-for="(item, index) in flatList"
          :key="index"
          class="swiper-item"
        >
          <view
            class="item-content"
            :style="{
              transform: index === currentIndex ? 'scale(1)' : 'scale(0.9)',
              opacity: index === currentIndex ? 1 : 0.8,
            }"
            @click="onItemClick(index)"
          >
            <image :src="item.thumb" mode="aspectFill" class="item-image" />
          </view>
        </swiper-item>
      </swiper>
      <!-- 底座 -->
      <image class="base" mode="widthFix" src="/static/images/base.png" />
      <!-- 规则分享 -->
      <view class="gzfx">
        <view class="gz" @click="checkGz"></view>
        <view class="fx"></view>
      </view>
      <image class="sx" mode="widthFix" src="/static/images/sx.png" />
      <image
        class="sg"
        mode="widthFix"
        src="/static/images/sg.png"
        @click="showSg"
      />
      <view class="tabs">
        <view
          :class="activeIndex == 0 ? 'active-item' : 'item'"
          @click="tabClick(0)"
        >
          奖池一览
        </view>
        <view
          :class="activeIndex == 1 ? 'active-item' : 'item'"
          @click="tabClick(1)"
        >
          中奖记录
        </view>
      </view>
    </view>
    <template v-if="activeIndex == 0">
      <view
        class="content-card"
        v-for="(item, index) in boxDetail.awardList"
        :key="index"
      >
        <view class="header-box">
          <image
            class="img"
            mode="widthFix"
            :src="`/static/images/${imageMap[item.title]}.png`"
          />
          <view class="text">
            概率
            <text style="color: #f25a56; margin-right: 10rpx">
              {{ Number(item.rate) }}%
            </text>
            （此概率为当前赏别出概率）
          </view>
        </view>
        <view class="grid-container">
          <view class="grid-item" v-for="(card, idx) in item.list" :key="idx">
            <view class="goods">
              <view class="imgthumb">
                <image class="img" mode="aspectFill" :src="card.thumb" />
              </view>
              <view class="info">
                <view class="name">{{ card.title }}</view>
                <view class="price">
                  <text style="font-size: 20rpx">
                    售价 ￥{{ Number(card.price) }}
                  </text>
                  /抽
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>

    <view class="record-card" v-else>
      <view class="tips">查看最近10个赏品</view>
      <view class="header-box">
        <image
          :class="spIndex == 0 ? 'active-img' : 'img'"
          mode="widthFix"
          src="/static/images/csk.png"
          @click="imgTab(0)"
        />
        <image
          :class="spIndex == 1 ? 'active-img' : 'img'"
          mode="widthFix"
          src="/static/images/ohk.png"
          @click="imgTab(1)"
        />
        <image
          :class="spIndex == 2 ? 'active-img' : 'img'"
          mode="widthFix"
          src="/static/images/ptk.png"
          @click="imgTab(2)"
        />
      </view>
      <view class="list-box" v-for="(item, index) in latestList" :key="index">
        <view class="top">
          <image mode="aspectFill" :src="item.user.avatar" />
          <view>{{ item.user.nickName }}</view>
          <text>{{ item.created_time }}</text>
        </view>
        <view class="bottom">
          <image mode="aspectFill" :src="item.thumb" />
          <view class="name">{{ item.title }}</view>
          <view class="num">{{ item.number }}发</view>
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="fl">
        <image
          mode="widthFix"
          src="/static/images/smoke1.png"
          @click="ClickShowdd(1)"
        />
        <image
          mode="widthFix"
          src="/static/images/smoke3.png"
          @click="ClickShowdd(3)"
        />
        <image
          mode="widthFix"
          src="/static/images/smoke5.png"
          @click="ClickShowdd(5)"
        />
        <image
          mode="widthFix"
          src="/static/images/smoke10.png"
          @click="ClickShowdd(10)"
        />
      </view>
    </view>

    <!-- 开赏记录弹窗 -->
    <u-popup mode="center" border-radius="8" v-model="showRecord">
      <view class="pop-box">
        <view class="header">
          <image
            class="bg"
            mode="widthFix"
            src="/static/images/Group 1410105122.png"
          />
          <text class="title">开赏记录</text>
          <image
            class="gb"
            src="/static/images/gb.png"
            @click="showRecord = false"
          />
        </view>
        <view class="content">
          <!-- 		<view class="top_tab">
						<scroll-view class="scroll-X" scroll-x="true">
							<view :class="sgActive == item ? 'tab-a' : 'tab'" v-for="(item, index) in sgTab"
								:key="index" @click="sgTabClick(item)">{{item}}</view>
						</scroll-view>
					</view> -->
          <view class="list-box" v-for="(item, index) in sglist" :key="index">
            <view class="top">
              <image mode="aspectFill" :src="item.user.avatar" />
              <view>{{ item.user.nickName }}</view>
              <text>{{ item.created_time }}</text>
            </view>
            <view class="bottom">
              <image mode="aspectFill" :src="item.thumb" />
              <view class="name">{{ item.title }}</view>
              <view class="lucky">
                <image mode="widthFix" src="/static/images/lucky.png" />
                <text>X{{ item.number }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

   <!-- 规则弹窗 -->
    <u-popup mode="center" border-radius="8" v-model="showRule">
      <view class="pop-box">
        <view class="header">
          <image
            class="bg"
            mode="widthFix"
            src="/static/images/Group 1410105122.png"
          />
          <text class="title">规则</text>
          <image
            class="gb"
            src="/static/images/gb.png"
            @click="showRule = false"
          />
        </view>
        <view class="content">
          <rich-text :nodes="rules.editor"></rich-text>
        </view>
      </view>
    </u-popup>
    <!-- 确认订单 -->
    <u-popup mode="center" border-radius="8" v-model="showdd">
      <view class="pop-box">
        <view class="header">
          <image
            class="bg"
            mode="widthFix"
            src="/static/images/Group 1410105122.png"
          />
          <text class="title">确认订单</text>
          <image
            class="gb"
            src="/static/images/gb.png"
            @click="showdd = false"
          />
        </view>
        <view class="content">
          <view class="product-exchange-body">
            <view class="product-item">
              <image class="product-image" :src="boxDetail.box.thumb"></image>
              <view class="product-info">
                <view class="product-name">{{ boxDetail.box.title }}</view>
                <view class="product-tip">不支持七天无理由</view>
                <view class="product-price">
                  <span>价格：</span>
                  ¥{{ boxDetail.box.price }}
                </view>
              </view>
              <view class="quantity-control">
                <view class="quantity">X{{ this.num }}</view>
              </view>
            </view>
            <view class="row">
              <view>可用酷玩币：</view>
              <view>{{ userInfo.money }}</view>
            </view>
            <view class="row">
              <view>开启动画：</view>
              <view class="value">
                <image
                  class="switch"
                  @click="toggleAnimate"
                  mode="widthFix"
                  :src="`/static/images/switch${showAnimate ? '-act' : ''}.png`"
                />
              </view>
            </view>
            <view class="agreement" @click="agreement = !agreement">
              <image
                :src="`/static/images/wxz${agreement ? '-act' : ''}.png`"
                mode="widthFix"
              />
              <text>同意《用户隐私协议》</text>
            </view>
          </view>
          <view class="exchange-footer">
            <view class="exchange-total">
              <view class="total-info">
                <view class="total-points">
                  合计：
                  <text class="points">{{ totalPrice }}酷玩币</text>
                </view>
              </view>
              <view class="confirm-exchange-btn" @click="finalConfirmExchange">
                确认购买
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      list: [],
      rules: {},
      num: 0, // 商品数量
      showdd: false,
      currentIndex: 0,
      activeIndex: 0,
      spIndex: 0,
      showRecord: false, // 赏柜记录弹窗
      sgTab: [],
      sgActive: 0, // 默认选中第一个标签
      showRule: false, // 规则弹窗
      allData: [], // 存储所有标签的数据
      whitelist: "",
      page: 1,
      perPage: 10,
      DataList: [],
      boxDetail: {
        awardList: [],
        box: {},
      },
      flatList: [],
      tenList: [],
      imageMap: {
        普通款: "ptk",
        欧皇款: "ohk",
        超神款: "csk",
      },
      showAnimate: false,
      agreement: false,
    };
  },
  onLoad(e) {
    this.getRules();
    this.getBoxDetail(e.id);
    this.getzjjl(e.id);
		this.$store.dispatch('getUserInfo');
  },

  computed: {
    ...mapGetters(["userInfo"]),
    sglist() {
      // return this.allData.filter(item=>item.label == this.sgActive) || []
      return this.allData;
    },
    latestList() {
      let labels = ["超神款", "欧皇款", "普通款"];
      return (
        this.tenList.filter((item) => item.mark == labels[this.spIndex]) || []
      );
    },
    totalPrice() {
      return this.num * Number(this.boxDetail.box.price);
    },
  },
  methods: {
    toggleAnimate() {
      this.showAnimate = !this.showAnimate;
    },
    checkGz() {
      this.showRule = true;
    },
    showSg() {
      this.showRecord = true;
    },
    // 标签切换方法
    sgTabClick(label) {
      this.sgActive = label;
    },
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },
    onItemClick(index) {
      console.log("点击了第" + index + "个");
    },
    tabClick(index) {
      this.activeIndex = index;
    },
    imgTab(index) {
      this.spIndex = index;
    },
    getRules() {
      this.$common.getRule(3).then((res) => {
        this.rules = res;
      });
    },
		finalConfirmExchange(){
			if(!this.agreement){
				uni.showToast({
					title: '请同意用户协议',
					icon: 'none',
				});
				return;
			}
			this.req({
				url: '/v1/box/addOrder',
				data: {
					box_id: this.boxDetail.box.id,
					number: this.num,
					pay_type: 1,
				},
				success:(orderRes)=>{
					if(orderRes.code == 200){
						this.req({
							url: '/v1/box/pay',
							data: {
								order_sn: orderRes.data.order_sn,
							},
							success: (payRes) => {
								if (payRes.code == 200) {
									uni.showToast({
										title: '支付成功',
										icon: 'success',
									});
									this.showdd = false;
    							this.getzjjl(e.id);
									this.$store.dispatch('getUserInfo');
								}
							},
						});
					} else {
						uni.showToast({
							title: orderRes.message || '下单失败',
							icon: 'none',
						});
					}
				}
			})
		},
    // 获取盒子详情
    getBoxDetail(id) {
      if (this.isLoading) return;
      this.isLoading = true;
      // Get API parameters based on active navigation type
      const params = this.getApiParams();

      this.req({
        url: "/v1/box/info",
        data: {
          id,
        },
        Loading: false, // 使用自定义loading状态
        success: (res) => {
          this.isLoading = false;
          if (res.code == 200) {
            this.boxDetail = res.data;
            this.flatList = res.data.awardList.map((v) => v.list).flat();
          } else {
            // 请求成功但业务失败
            uni.showToast({
              title: res.message || "加载失败",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          this.isLoading = false;
          // 网络请求失败
          uni.showToast({
            title: "网络请求失败，请检查网络",
            icon: "none",
          });

          console.error("网络请求失败:", err);
        },
      });
    },
    // 获取接口type参数
    getTypeParam() {
      // whitelist: 0-推荐, 1-新品, 2-热门, 3-专区
      // API type参数: 推荐不需要传特定值，坑位赏 =1, 无限赏 =2, 扭蛋机=3
      return this.whitelist === 0 ? "2" : String(this.whitelist);
    },

    // 获取API参数
    getApiParams() {
      // 推荐: hot=1, type为空
      // 新品/热门/专区: hot为空, type有对应值
      if (this.whitelist === 0) {
        return {
          hot: "1",
        };
      } else {
        return {
          type: String(this.whitelist),
        };
      }
    },
    // 获取数据接口
    getzjjl(id) {
      this.req({
        url: "/v1/box/log",
        data: {
          box_id: id,
          mark: "",
          label: "",
        },
        Loading: false,
        success: (res) => {
          if (res.code == 200) {
            this.sgTab = res.data.labels.map((v) => v.label);
            this.allData = res.data.list;
            this.tenList = res.data.list.slice(0, 10);
            this.sgActive = this.sgTab[0];
            setTimeout(() => {
              console.log("log", this.latestList);
            }, 0);
          }
        },
      });
    },
    // 根据标签ID筛选数据
    ClickShowdd(data) {
      this.num = data;
      this.showdd = true;
    },
  },
};
</script>

<style lang="scss" scoped>
/* 定义自定义标题样式 */
.uni-nav-bar-text {
  span {
    font-weight: bold !important; /* 加粗 */
    color: white !important; /* 白色文字 */
    text-shadow: 0 0 1px #000, /* 基础描边 */ 0 0 1px #000, 0 0 1px #000,
      -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }
}
.un-reward {
  background-color: #f0dbb0;
  min-height: 100vh;
  padding: 30rpx 0 200rpx;
}

.header {
  height: 840rpx;
  position: relative;

  .swiper {
    width: 100%;
    height: 520rpx;
  }

  .swiper-item {
    width: 70% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }

  .item-content {
    width: 384rpx;
    height: 504rpx;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, opacity;
    background-image: url(/static/images/photoframe.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 66rpx 72rpx;
    overflow: hidden;
  }

  .item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .base {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .gzfx {
    width: 160rpx;
    height: 52rpx;
    position: absolute;
    top: -20rpx;
    right: 0;
    background-image: url(/static/images/gzfx.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;

    .gz {
      width: 50%;
      height: 52rpx;
    }

    .fx {
      width: 50%;
      height: 52rpx;
    }
  }

  .sx {
    width: 92rpx;
    position: absolute;
    bottom: 210rpx;
    left: 36rpx;
  }

  .sg {
    width: 92rpx;
    position: absolute;
    bottom: 210rpx;
    right: 36rpx;
  }

  .tabs {
    width: 710rpx;
    height: 96rpx;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding: 4rpx;
    border-radius: 16rpx;
    border: 4rpx solid #000000;
    display: flex;

    .item {
      width: 50%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
        2px 2px 0 #000;
      /* 黑色描边 */
    }

    .active-item {
      width: 50%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
      font-weight: bold;
      font-size: 32rpx;
      background-color: #f36058;
      border-radius: 16rpx;
      border: 4rpx solid #1d1d1d;
      color: #ffffff;
      text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
        2px 2px 0 #000;
      /* 黑色描边 */
    }
  }
}

.content-card {
  padding: 20rpx;

  .header-box {
    padding: 20rpx 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .img {
      width: 180rpx;
    }

    .text {
      font-family: PingFang SC, PingFang SC;
      font-size: 24rpx;
      color: #1d1d1d;
    }
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 创建四列，每列宽度相等 */
    gap: 10rpx;
    /* 设置网格之间的间隔 */
  }

  .grid-item {
    margin-top: 10rpx;
  }

  .goods {
    width: 172rpx;
    background: #f8f5e4;
    border: 2rpx solid #473529;
    border-radius: 10rpx;

    .imgthumb {
      width: 164.25rpx;
      height: 140rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .img {
      display: block;
      width: 100%;
    }

    .info {
      padding: 10rpx;

      .name {
        font-size: 20rpx;
        color: #000000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        font-size: 20rpx;
        color: #000000;
        font-weight: bold;
        display: flex;
      }
    }
  }
}

.record-card {
  padding: 20rpx 30rpx;

  .tips {
    padding: 20rpx 0;
    text-align: center;
    font-size: 20rpx;
    color: #000000;
  }

  .header-box {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .img {
      width: 180rpx;
      opacity: 0.5;
    }

    .active-img {
      width: 180rpx;
      opacity: 1;
    }
  }
}

.list-box {
  width: 100%;
  border-radius: 8rpx;
  border: 4rpx solid #1d1d1d;
  margin-top: 30rpx;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;

    image {
      width: 32rpx;
      height: 32rpx;
      border: 2rpx solid #1d1d1d;
      border-radius: 32rpx;
    }

    view {
      flex: 1;
      margin: 0 20rpx;
      font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
      font-size: 32rpx;
      font-weight: bold;
      color: #ffffff;
      text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
        2px 2px 0 #000;
      /* 黑色描边 */
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-top: 4rpx solid #1d1d1d;

    image {
      width: 68rpx;
      height: 68rpx;
      border: 2rpx solid #1d1d1d;
      border-radius: 10rpx;
    }

    .name {
      flex: 1;
      margin: 0 20rpx;
    }

    .num {
      padding: 6rpx 10rpx;
      background: #1d1d1d;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 2rpx solid #e2b589;
      font-size: 18rpx;
      color: #f9e14f;
    }

    .lucky {
      display: flex;
      align-items: center;

      image {
        width: 88rpx;
        margin-right: 10rpx;
      }

      text {
        font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
        font-size: 24rpx;
        font-weight: bold;
        color: #ffffff;
        text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
          2px 2px 0 #000;
        /* 黑色描边 */
      }
    }
  }
}

.footer {
  width: 738rpx;
  height: 170rpx;
  position: fixed;
  left: 50%;
  bottom: 30rpx;
  transform: translateX(-50%);

  .fl {
    display: flex;
    align-items: center;
  }

  image {
    width: 25%;
  }
}

.pop-box {
  width: 670rpx;
  background: #f88802;
  border-radius: 10rpx;
  border: 6rpx solid #f88802;

  .header {
    width: 100%;
    height: 112rpx;
    position: relative;

    .bg {
      width: 100%;
    }

    .title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
      font-weight: bold;
      font-size: 36rpx;
      color: #ffffff;
      text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
        2px 2px 0 #000;
      /* 黑色描边 */
    }

    .gb {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 50%;
      right: 30rpx;
      transform: translateY(-50%);
    }
  }

  .content {
    height: 760rpx;
    background: #eeecd3;
    // padding: 30rpx;
    padding: 14rpx;
    word-wrap: break-word;
    overflow-y: scroll;

    .top_tab {
      width: 100%;
      overflow: hidden;

      .scroll-X {
        white-space: nowrap;
        width: 100%;
      }

      .tab {
        width: 108rpx;
        height: 48rpx;
        line-height: 40rpx;
        text-align: center;
        background-color: #f7b33a;
        border: 4rpx solid #161300;
        border-radius: 12rpx;
        display: inline-block;
        font-size: 22rpx;
        font-weight: bold;
        color: #ffffff;
        text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
          2px 2px 0 #000;
        /* 黑色描边 */
        margin-right: 30rpx;
      }

      .tab-a {
        width: 108rpx;
        height: 48rpx;
        line-height: 40rpx;
        text-align: center;
        background-color: #f16258;
        border: 4rpx solid #161300;
        border-radius: 12rpx;
        display: inline-block;
        font-size: 22rpx;
        font-weight: bold;
        color: #ffffff;
        text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
          2px 2px 0 #000;
        /* 黑色描边 */
        margin-right: 30rpx;
      }
    }
  }
}

.product-exchange-body {
  // padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.product-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.product-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 15rpx;
}

.product-info {
  flex: 1;
}

.product-name {
  color: #333;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

.product-tip {
  font-size: 16rpx;
  margin-bottom: 10rpx;
  color: #333;
}

.product-price {
  font-size: 20rpx;
  color: #e74c3c;
  span {
    color: #000;
  }
}

.quantity-control {
  display: flex;
  align-items: center;
  position: absolute;
  right: 15rpx;
  top: 15rpx;
}
.row {
  color: #333;
  font-size: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  .value {
    font-size: 20rpx;
    display: flex;
    align-items: center;
    .switch {
      width: 73rpx;
      height: 41rpx;
    }
  }
}
.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 240rpx 30rpx 30rpx 30rpx;
  font-size: 24rpx;
  color: #000000;
  image {
    width: 37rpx;
    height: 37rpx;
    margin-right: 10rpx;
  }
}
.minus-btn,
.plus-btn {
  width: 50rpx;
  height: 50rpx;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  border-radius: 6rpx;
  color: #666;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.exchange-rules {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.rule-title {
  font-size: 28rpx;
  margin-bottom: 15rpx;
  color: #666;
  font-weight: bold;
}

.rule-content {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.exchange-footer {
	padding: 30rpx 0;
}

.exchange-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 20rpx;
  color: #333;
}

.total-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.total-count {
  font-size: 26rpx;
  margin-bottom: 5rpx;
}

.total-points {
  font-weight: normal;
  font-size: 26rpx;
}

.points {
  color: #e74c3c;
  font-size: 28rpx;
  font-weight: bold;
}

.confirm-exchange-btn {
  width: 260rpx;
  height: 80rpx;
  background: #f36058;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 4rpx solid #1d1d1d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #ffffff;
}
//下单弹窗
.pop-box {
			width: 670rpx;
			background: #F88802;
			border-radius: 10rpx;
			border: 6rpx solid #F88802;

			.pop-header {
				width: 100%;
				height: 112rpx;
				position: relative;

				.bg {
					width: 100%;
				}

				.title {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					text-shadow:
						-2px -2px 0 #000,
						2px -2px 0 #000,
						-2px 2px 0 #000,
						2px 2px 0 #000;
					/* 黑色描边 */
				}

				.gb {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 50%;
					right: 30rpx;
					transform: translateY(-50%);
				}
			}

			.content {
				height: 760rpx;
				background: #EEECD3;
				padding: 30rpx;
				word-wrap: break-word;
				overflow-y: scroll;

				.top_tab {
					width: 100%;
					overflow: hidden;

					.scroll-X {
						white-space: nowrap;
						width: 100%;
					}

					.tab {
						width: 108rpx;
						height: 48rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: #f7b33a;
						border: 4rpx solid #161300;
						border-radius: 12rpx;
						display: inline-block;
						font-size: 22rpx;
						font-weight: bold;
						color: #FFFFFF;
						text-shadow:
							-2px -2px 0 #000,
							2px -2px 0 #000,
							-2px 2px 0 #000,
							2px 2px 0 #000;
						/* 黑色描边 */
						margin-right: 30rpx;
					}

					.tab-a {
						width: 108rpx;
						height: 48rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: #f16258;
						border: 4rpx solid #161300;
						border-radius: 12rpx;
						display: inline-block;
						font-size: 22rpx;
						font-weight: bold;
						color: #FFFFFF;
						text-shadow:
							-2px -2px 0 #000,
							2px -2px 0 #000,
							-2px 2px 0 #000,
							2px 2px 0 #000;
						/* 黑色描边 */
						margin-right: 30rpx;
					}

				}
			}
		}
</style>
